<template>
  <je-modal
    v-model:visible="visibleModule"
    width="460px"
    :title="$t('updateKeyModal.title')"
    class="modal-updatekey"
    height="auto"
    :resize="false"
    :maximizable="false"
    :ok-button="addModule"
    model="modelRef"
    cancel-button
    @close="cancelModal"
  >
    <je-form layout="vertical">
      <je-form-item
        :label="$t('updateKeyModal.labelText')"
        v-bind="validateInfos.pkCode"
        label-align="top"
      >
        <je-input-select-grid
          v-model:value="modelRef.pkCode"
          name="pkCode"
          :orders="[
            { code: 'TABLECOLUMN_CLASSIFY', type: 'ASC' },
            { code: 'SY_ORDERINDEX', type: 'ASC' },
          ]"
          :querys="[
            {
              code: 'TABLECOLUMN_RESOURCETABLE_ID',
              type: '=',
              value: tableData.JE_CORE_RESOURCETABLE_ID,
              cn: 'and',
            },
            {
              code: 'TABLECOLUMN_ISCREATE',
              type: '=',
              value: '1',
              ch: 'and',
            },
          ]"
          :editable="tableData.RESOURCETABLE_TYPE != 'VIEW'"
          :select-options="{ title: '选择字段' }"
          config-info="JE_CORE_TABLECOLUMN,pkCode,TABLECOLUMN_CODE,S"
        />
      </je-form-item>
      <span class="annotation">{{ $t('updateKeyModal.annotationText') }}</span>
    </je-form>
  </je-modal>
</template>
<script>
  import { defineComponent, ref, reactive } from 'vue';
  import { InputSelect, Modal, Form } from '@jecloud/ui';
  import { updatePKName } from '../../../api/index';
  import { verifyData } from '../../../helper/common';

  const useForm = Form.useForm;
  export default defineComponent({
    name: 'UpdateKey',
    components: {
      JeModal: Modal,
      JeForm: Form,
      JeFormItem: Form.Item,
      JeInputSelectGrid: InputSelect.Grid,
    },
    props: {
      modalShow: {
        type: Boolean,
        default: false,
      },
      modalData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      productData: {
        type: Object,
        required: true,
        default: () => {
          return {};
        },
      },
    },
    emits: ['changeData'],
    setup(props, { emit }) {
      //保存模块数据，关闭弹窗
      const visibleModule = ref(props.modalShow);
      const confirmLoading = ref(false);
      const tableData = reactive(props.modalData);
      const modelRef = reactive({
        pkCode: '',
      });
      const cancelModal = () => {
        visibleModule.value = false;
        emit('changeData', 'cancel');
      };
      const rulesRef = reactive({
        pkCode: verifyData.code,
      });

      //如果是导入的表只需要校验必填
      if (tableData.RESOURCETABLE_IMPORT == '1' || tableData.RESOURCETABLE_TYPE == 'VIEW') {
        rulesRef.pkCode = verifyData.importCode;
      }

      const { resetFields, validate, validateInfos } = useForm(modelRef, rulesRef, {
        onValidate: (...args) => {},
      });
      const addModule = ({ $modal, button }) => {
        const modal = $modal,
          btn = button;
        btn.loading = true;
        validate()
          .then(() => {
            updatePKName(
              {
                JE_CORE_RESOURCETABLE_ID: tableData.JE_CORE_RESOURCETABLE_ID,
                newCode: modelRef.pkCode,
                SY_PRODUCT_ID: props.productData.productId,
              },
              { pd: props.productData.productCode },
            )
              .then((data) => {
                btn.loading = false;
                modal.close();
                Modal.notice(data.message, 'success');
                emit('changeData', 'addKey');
              })
              .catch((e) => {
                btn.loading = false;
                Modal.alert(e.message, 'error');
              });
          })
          .catch((error) => {
            btn.loading = false;
          });
        return false;
      };
      return {
        validateInfos,
        resetFields,
        modelRef,
        cancelModal,
        visibleModule,
        addModule,
        centered: true,
        confirmLoading,
        tableData,
      };
    },
  });
</script>
<style lang="less" scoped>
  .modal-updatekey {
    .annotation {
      color: #aaaaaa;
      line-height: 28px;
      font-size: 14px;
      font-weight: Italic;
      display: inline-block;
      font-style: oblique;
    }
  }
</style>
